<template>
	<!-- 公用的登陆弹窗 -->
	<!-- 用户未登录则从上到下弹出 -->
	<view class="login-view" v-if="login_box.show">
		<view class="logo-container">
			<image src="/static/logo.png" mode="widthFix"></image>
			<text>乐购零食商铺</text>
		</view>
		<view class="login-button">
			<button class="login" type="primary" @click="login">
				<text class="iconfont icon-weixin"></text>
				<text>一键登录</text>
			</button>
			<button class="concel" type="plain" @click="login_box.show = false">暂不登录</button>
		</view>
	</view>
</template>

<script setup>
	import { login_box } from '@/public/package-js/passValue.js'
	import { LoginFun } from '@/public/package-js/login.js'
	import { FeedBack } from "@/public/package-js/feedBack.js"

	//登陆
	async function login() {
		let res = await new LoginFun().login()
		if (res = "success") {
			// 登录成功
			new FeedBack("登录成功", "success").toast()
			login_box.show = false
			login_box.response = 'success'

		} else {
			new FeedBack("登录失败", "success").toast()
		}

	}
</script>

<style scoped>
	.login-view {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 999;
		animation: post-list-row .3s;
	}

	@keyframes post-list-row {
		0% {
			top: 100%
		}

		100% {
			top: 0
		}
	}

	.login-button {
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.login{
		margin: 70rpx;
		width: 430rpx;
		height: 98rpx;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login text:nth-child(1){
		font-size: 50rpx;
		margin-right: 10rpx;
	}

	.concel {
		margin: 70rpx;
		width: 430rpx;
		border-radius: 100rpx;
		background-color: #FFFFFF;
		border: 1px solid #a7a7a7;
		color: #525252;
	}

	.logo-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 140rpx 0 100rpx 0;
	}

	.logo-container image {
		width: 280rpx;
		height: 280rpx;
		border-radius: 50%;
	}

	.logo-container text {
		margin-top: 10rpx;
		font-size: 38rpx;
	}
</style>
